<template>
	<view class="container">
		<image src="/static/chongdian.jpg" mode="widthFix" class="banner"></image>
		<view class="infor-wrapper">
			<view class="infor-item">
				<image src="/static/sjmc.png" class="icon"></image>
				<view class="text">
					<view class="name">设备编号</view>
					<view class="desc">机器号：{{equipmentNo}}</view>
					<view class="bluetooth-status">
						<view class="desc" v-if="bluetoothStatus">蓝牙已开启，连接成功！</view>
						<view class="desc" v-else @click="bluetoothReset">蓝牙未连接，<text
								style="color: blue;text-decoration: underline;">请点击这里辅助连接</text></view>
					</view>
					<view class="place"></view>
				</view>
			</view>
			<view class="infor-item">
				<image src="/static/splx.png" class="icon"></image>
				<view class="text">
					<view class="name">适配所有手机型号</view>
					<view class="desc">苹果、安卓、type-c</view>
				</view>
			</view>
			<view class="infor-item">
				<image src="/static/sfjg.png" class="icon"></image>
				<view class="text">
					<view class="name">充电“断电”特别提示</view>
					<view class="desc">请尽量避免插拔电源</view>
					<view class="desc">
						如您重新插拔电源，您的充电将会停止，请您用“下单手机”重新扫码“免费激活充电”
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn" @click="togglePopup">立即充电</view>
		<uni-transition :duration="300" :mode-class="['fade']" :styles="maskClass" @click="togglePopup"
			:show="isPopupShow">
		</uni-transition>
		<uni-transition :duration="260" :mode-class="['slide-bottom']" :styles="popupTransfromClass"
			:show="isPopupShow">
			<view class="popup">
				<view class="title">支付</view>
				<view class="price-wrapper">
					<view class="titl">充电金额：<text class="desc">（按时间计算）</text></view>
					<scroll-view scroll-y="true" class="price-list-wrapper">
						<view class="price-list">
							<view class="price-item" :class="{'on': index == select}" @click="onSelect(index)"
								v-for="(item, index) in list" :key="index">
								<view class="price">{{item.price}}元</view>
								<view class="time">{{item.name}}</view>
								<!-- <view class="time">充电{{item.time}}分钟</view>	 -->
							</view>
						</view>
					</scroll-view>
					<view style="margin-top: -20rpx;">
						
						<view
							style=" text-align:center;font-size:26rpx;color:#f00;white-space: nowrap;font-weight: 600;">
							温馨提示：在您支付或充电时
						</view>
						<view style="text-align:center;font-size:26rpx;color:#f00;font-weight: 600;">
							如您重新插拔电源，您的充电将会停止
						</view>
						<view
							style=" text-align:center;font-size:26rpx;color:#f00;white-space: nowrap;font-weight: 600;">
							请您用“下单手机”重新扫码“免费激活充电”
						</view>
					</view>

				</view>
				<view class="payment-method-wrapper">
					<view class="titl">选择支付方式</view>
					<view class="payment-method">
						<view class="payment-method-item" @click="selectPayMethod(1)">
							<image src="/static/balance.png" class="icon"></image>
							<view class="text">余额支付</view>
							<view class="checkbox-wrapper" :class="{'on': payMethod == 1}">
								<image class="checkbox on" src="/static/checkbox_on.png"></image>
								<image class="checkbox off" src="/static/checkbox.png"></image>
							</view>
						</view>
						<view class="payment-method-item" @click="selectPayMethod(2)">
							<image src="/static/wechat.png" class="icon"></image>
							<view class="text">微信支付</view>
							<view class="checkbox-wrapper" :class="{'on': payMethod == 2}">
								<image class="checkbox on" src="/static/checkbox_on.png"></image>
								<image class="checkbox off" src="/static/checkbox.png"></image>
							</view>
						</view>
						<!-- 						<view class="payment-method-item">
							<image src="/static/alipay.png" class="icon"></image>
							<view class="text">支付宝支付</view>
							<view class="checkbox-wrapper">
								<image class="checkbox on" src="/static/checkbox_on.png"></image>
								<image class="checkbox off" src="/static/checkbox.png"></image>
							</view>
						</view>
 -->
					</view>
				</view>
				<view class="bottom-menu">
					<view class="text"><text class="small"><text class="black">合计：</text>¥</text>{{list[select].price}}
					</view>


					<button type="default" class="btn" @click="submitOrder">提交订单</button>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import uniTransition from '@/components/uni-transition/uni-transition.vue'
	import payment from '@/mixins/payment.js'
	import {
		frontDetail
	} from '@/api/order.js'
	import {
		pownerRechargeSet,
		pownerRecharge,
		pownerRechargeMechine,
		getPownerRechargeSetById
	} from '@/api/online.js'
	export default {
		components: {
			uniTransition
		},
		mixins: [payment],
		data() {
			return {
				isPopupShow: false,
				chargeStatus: true,
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'z-index': 10,
					'background-color': 'rgba(0, 0, 0, 0.6)'
				},
				popupTransfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'left': 0,
					'right': 0,
					'z-index': 11,
					'background-color': '#fff'
				},
				payMethod: '',
				select: 0,
				list: [],
				timer: null,
				shopId: '',
				equipmentNo: '',
				blueType: 2,
			}
		},

		computed: {
			bluetoothStatus() {
				return this.$store.getters.bluetoothStatus
			},
			bluetoothObj() {
				return this.$store.getters.bluetoothObj
			}
		},
		onShow() {
			const that = this
			/* 监听蓝牙设备的连接状态 */
			uni.onBLEConnectionStateChange(function(res) {
				console.log(res.deviceId + "连接状态*confir****:" + res.connected)
				if (res.connected == false) {
					that.$store.commit('user/UPDATE_STATUS', res.connected);
				}
			})
		},

		onLoad(option) {
			// this.equipmentNo = option.equipmentNo
			this.equipmentNo = option.equipmentNo
			this.blueType = option.blue
			this.shopId = option.shop
			console.log('getBlueType复制', this.blueType)
			this.getList();
		},
		methods: {
			togglePopup() {
				
				
				const that = this
				getPownerRechargeSetById({
					equipmentNo: this.equipmentNo
				}).then((res) => {
					console.log(res.result)
					if(res.result==null){
						this.isPopupShow = !this.isPopupShow
					}else{
						this.bluetoothCallback2(res.result.recordNo)
					}
				})
				
			},

			onSelect(index) {
				this.select = index
			},
			bluetoothReset() {
				// if (!this.isHaveGodd) {
				// 	return
				// }
				console.log(this.blueType,"xxxxxxxxxxxxxxx进来了")
				if (this.blueType == 1) {
					this.bluetoothObj.reset(this.equipmentNo)
				} else {
					this.bluetooth(this.equipmentNo)
				}
			},
			getList() {
				this.loadingShow = true
				const data = {
					shopId: this.shopId
				}
				pownerRechargeSet(data).then(respanse => {
					// console.log(respanse.result)
					this.list = respanse.result
				})
			},
			// // 重新链接
			// bluetoothReset() {
			// 	// this.bluetoothObj.reset()
			// 	if (this.blueType == 1) {
			// 		this.bluetoothObj.reset(this.equipmentNo)
			// 	} else {
			// 		this.bluetooth(this.equipmentNo)
			// 	}
				
			// },

			// 生成订单
			submitOrder() {
				const that = this
				getPownerRechargeSetById({
					equipmentNo: this.equipmentNo
				}).then((res) => {
					console.log(res.result)
					if(res.result==null){
						this.popPay(null)
					}else{
						this.bluetoothCallback2(res.result.recordNo)
					}
				})
			},
			popPay(recordNo) {
				if (!this.bluetoothStatus) {
					uni.showToast({
						title: '蓝牙已断开，请点击连接',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.payMethod) {
					uni.showToast({
						title: '请选择支付方式！',
						icon: 'none',
						duration: 2000
					})
					return
				}

				this.submitFlag = true
				const data = {
					recordNo,
					equipmentNo: this.equipmentNo,
					payMethod: this.payMethod,
					pownerRechargeSetId: this.list[this.select].id
				}
				pownerRecharge(data).then(respanse => {
					console.log(respanse, '>>>>>机器创建订单成功')
					this.createOrderDetails = respanse.result
					this.payment(1, false, true)
					this.timer = setInterval(() => {
						this.bluetoothCallback(respanse.result.recordNo);
					}, 2000);
					// paymentType=1, isReturn=false, isBluetooth=false
				}).catch(err => {
					console.log(err, '>>>>>机器创建订单失败')
					this.submitFlag = false
				})
			},
			// getOrderState(data) {
			// 	let opt = {
			// 		orderId: data.orderNo
			// 	}
			// 	frontDetail(opt).then(res => {
			// 		console.log('opt', res)
			// 		if (res.result.status == 1 || res.result.status == 2) {
			// 			clearInterval(this.timer);
			// 			this.bluetoothCallback();
			// 		}
			// 	})
			// },
			// 支付成功回调
			bluetoothCallback(recordNo) {
				const data = {
					recordNo,
					orderNo: this.createOrderDetails.orderNo
				}
				
				// const temp='0127042001000A0000000000003A09';
				// this.sentOrder24(_Buffer)
				// if (this.blueType == 1) {
				// 	this.bluetoothObj.writeDevice(temp)
				// } else {
				// 	this.sentOrder24(temp)
				// }
				this.$store.commit('user/UPDATE_WXPAY', false);
				console.log(data, '11111>>>>>支付成功回调打开机器请求参数')
				pownerRechargeMechine(data).then(respanse => {
					console.log(respanse, '>>>>>打开机器请求成功')
					const _Buffer = respanse.result
				console.log(this.blueType, '11111>>>>>支付成功回调打开机器请求参数')
					if (this.blueType == 1) {
						this.bluetoothObj.writeDevice(_Buffer)
					} else {
						this.sentOrder24(_Buffer)
					}
					clearInterval(this.timer)
					// this.bluetoothObj.writeDevice(_Buffer)
					setTimeout(() => {
						this.bluetoothObj.disconnectBle()
						uni.navigateBack({
							delta: 1
						})
					}, 1500)

				}).catch(err => {
					console.log(err, '>>>>>打开机器请求失败')
					this.submitFlag = false
				})
			},
			// 已有订单直接回调
			bluetoothCallback2(recordNo) {
				const data = {
					orderNo: recordNo
				}
				pownerRechargeMechine(data).then(respanse => {
					console.log(respanse, '>>>>>打开机器请求成功1111')
					const _Buffer = respanse.result
					console.log(_Buffer, '>>>>>打开机器请求成功2222')
					console.log(this.blueType, '>>>>>打开机器请求成功2222')
					if (this.blueType == 1) {
						this.bluetoothObj.writeDevice(_Buffer)
					} else {
						this.sentOrder24(_Buffer)
					}
					clearInterval(this.timer)
					// this.bluetoothObj.writeDevice(_Buffer)
					// setTimeout(() => {
					// 	this.bluetoothObj.disconnectBle()
					// 	uni.showToast({
					// 		title:'继续充电成功',
					// 		duration:3000
					// 	});
					// 	uni.navigateBack({
					// 		delta: 1
					// 	})
					// }, 3000)
					setTimeout(() => {
						this.bluetoothObj.disconnectBle()
						uni.showToast({
							title:'继续充电成功',
							duration:3000,
							success: function(){
								setTimeout(function(){
								  wx.navigateBack({
									delta: 1
								  })
								}, 2000)
							  }
						});
					},1500)

				}).catch(err => {
					console.log(err, '>>>>>打开机器请求失败')
					this.submitFlag = false
				})
			},
			sentOrder24(slot1) {
				var that = this;
				var orderStr = slot1
				console.log('orderStr')
				console.log(orderStr)
				let typedArray = new Uint8Array(orderStr.match(/[\da-f]{2}/gi).map(function(h) {
					return parseInt(h, 16)
				}))
				let buffer1 = typedArray.buffer
				orderStr = buffer1
				this.write(orderStr);
			},


			// 支付方式
			selectPayMethod(payMethod) {
				this.payMethod = payMethod
			}


		}
	}
</script>
<style>
	body {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.checkbox-wrapper {
		display: flex;
		align-items: center;

		.checkbox {
			width: 28rpx;
			height: 28rpx;

			&.on {
				display: none;
			}

			&.off {
				display: block;
			}
		}

		&.on {
			.checkbox.on {
				display: block;
			}

			.checkbox.off {
				display: none;
			}
		}
	}

	.payment-method-wrapper {
		margin-top: 20rpx;

		.titl {
			padding-left: 26rpx;
			line-height: 40rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.payment-method {
			padding: 9rpx 0;
			background: #FFFFFF;
			border-radius: 10rpx;

			.payment-method-item {
				display: flex;
				align-items: center;
				padding: 24rpx 50rpx 24rpx 26rpx;

				.icon {
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					flex: 1;
					margin-left: 19rpx;
					line-height: 36rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}

	.banner {
		display: block;
		width: 100%;
	}

	.infor-wrapper {
		padding: 22rpx 55rpx 0;

		.infor-item {
			display: flex;
			padding: 20rpx 0 15rpx;

			.icon {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #F5F5F5;
			}

			.text {
				flex: 1;
				margin-left: 23rpx;

				.name {
					line-height: 40rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #040000;
				}

				.desc {
					line-height: 34rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.bottom-btn {
		margin: 47rpx 53rpx 0;
		height: 90rpx;
		background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
		border-radius: 45rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
	}

	.popup {
		padding-top: 29rpx;

		.title {
			line-height: 42rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #010101;
		}

		.price-wrapper {
			margin-top: 42rpx;

			.titl {
				padding-left: 26rpx;
				line-height: 40rpx;
				font-size: 30rpx;
				color: #010101;

				.desc {
					color: #999999;
				}
			}

			.price-list-wrapper {
				margin-top: 13rpx;
				height: 200rpx;

				.price-list {
					display: flex;
					flex-wrap: wrap;
					padding-left: 33rpx;

					.price-item {
						padding: 17rpx 0 0;
						margin: 23rpx 25rpx 0 0;
						width: 210rpx;
						height: 107rpx;
						box-sizing: border-box;
						border: 1px solid #999;
						border-radius: 10rpx;
						text-align: center;
						color: #999999;

						.price {
							line-height: 45rpx;
							font-size: 35rpx;
						}

						.time {
							line-height: 36rpx;
							font-size: 26rpx;
						}

						&.on {
							color: #FFFFFF;
							background-color: #ED602B;
							border-color: #ED602B;
						}
					}
				}
			}
		}
	}

	.bottom-menu {
		display: flex;
		padding: 66rpx 16rpx;
		box-shadow: 0px 0px 10rpx 0px rgba(175, 174, 174, 0.23);
		background-color: #fff;

		.text {
			flex: 1;
			margin-right: 37rpx;
			line-height: 80rpx;
			font-size: 46rpx;
			color: #EB6E37;

			.small {
				font-size: 26rpx;
			}

			.black {
				color: #000000;
			}
		}

		.btn {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
			border-radius: 40rpx;
		}
	}
</style>
